<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom :bgColor="'bg-' + theme" :isBack="false">
			<block slot="content">兑换商城</block>
		</cu-custom>
		<!-- #endif -->

		<view class="">
			<block v-if="detail">
				<view class="app-container">
					<view class=" bg-header"></view>
					<view class="bg-arc">
						<view class="bgcolor" :class="'bg-'+theme"></view>
					</view>
					<view class="app-body">
						<!-- #ifdef APP-VUE -->
						<view class="paddint-top-xl margin-top-xl"></view>
						<!-- #endif -->
						<!-- <locationView ref="locationView"></locationView> -->
						<block v-for="(item, index) in detail.items" :key="index">
							<PageIndex :ref="'PageIndex'+index" :value="item" :value1="livestart" :value2="liveend" :value3="livearr"></PageIndex>
						</block>
						<view class="VerticalBox" >
							<scroll-view class="VerticalNav nav " scroll-y scroll-with-animation :scroll-top="verticalNavTop">
								<view class="cu-item leftitem" :class="index==tabCur?'text-black   cur':''" v-for="(item,index) in list"
								 :key="index" @tap="TabSelect" :data-id="index">
									<view class="after" :class="'bg-'+theme"></view>
									{{item.title}}
								</view>
							</scroll-view>
							<scroll-view class="VerticalMain " scroll-y scroll-with-animation @scrolltolower="getMore">
								<view class="padding-top-sm cu-list grid col-2 margin-center" style="background-color: rgb(241 241 241);" v-if="is_special==1">
									<block >
										<view class="cu-item ">
											<view  @tap="TabSelectLevel(0)">
												<view >
													<view class="text-bold " :class="0==tabCurTab?'text-black   curT':'curX'">
														普通商品
													</view>
												</view>
											</view>
										</view>
										<view class="cu-item ">
											<view   @tap="TabSelectLevel(1)">
												<view >
													<view class="text-bold " :class="1==tabCurTab?'text-black   curT':'curX'">
														套餐版块
													</view>
												</view>
											</view>
										</view>
										
									</block>
								</view>
								<view class="padding-top-sm margin-bottom cu-list grid col-2 margin-center" >
									<block v-if="tc_index==1">
										<view class="cu-item " v-for="(tc,k) in tc_list" :key="k">
											<view  @tap="goPage('/pages/shop/pass_list?id='+tc.id)" style="background-color: #fafafa;">
												<view class="cu-avatar xl2 bg-white radius overflow ">
													<image :src="(tc && tc.picture)?tc.picture:''" mode="aspectFill"></image>
												</view>
												<view class=" margin-left-sm solid-bottom padding-bottom-sm">
													<view class="text-bold product-name">
													{{tc.name}}
													</view>
													<view class="goods-bottom  space-between margin-top-xs margin-bottom-sm">
															<view class="text-price text-orange ">{{tc.price}}</view>
													</view>
												</view>
											</view>
										</view>
										<view class="cu-load margin-center" :class="payloading?'loading':'over'"></view>
									</block>
									<block v-if="tc_index==0">
										<view class="cu-item " v-for="(pro,i) in pro_list" :key="i">
											<view  @tap="goPage('/pages/shop/goods?id='+pro.id)" style="background-color: #fafafa;">
												<view class="cu-avatar xl2 bg-white radius overflow ">
													<image :src="(pro && pro.picture)?pro.picture:''" mode="aspectFill"></image>
												</view>
												<view class=" margin-left-sm solid-bottom padding-bottom-sm">
													<view class="text-bold product-name">
													{{pro.name}}
													</view>
													<view class="goods-bottom  space-between margin-top-xs margin-bottom-sm">
															<view class="text-price text-orange ">{{pro.price}}</view>
															<view class="text-gray ">销量：{{pro.sales}}</view>
													</view>
												</view>
											</view>
										</view>
										<view class="cu-load margin-center" :class="loading?'loading':'over'"></view>
									</block>
								</view>
							</scroll-view>
							
						</view>
						<foot></foot>
					</view>
				</view>
			</block>
		</view>
		
		<Navbar ref="navbar" PageCur="signin"></Navbar>
	</view>
</template>

<script>
	
	import PageIndex from '@/components/page/pageIndex.vue'
	import Navbar from '@/components/default/Navbar.vue'
	import Foot from '@/components/default/foot.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		name: "common",
		components: {
			PageIndex,
			Navbar,
			Foot,
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		data() {
			return {
				page_code: 'COMMON',
				detail: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				livestart:null,
				liveend:null,
				cate_id: 0,
				pro_list: [],
				list: [],
				tc_list:[],
				hasMore: true,
				loading: false,
				payloading:false,
				verticalNavTop: 0,
				tabCur: 0,
				type: 1,
				is_special:0,
				page:1,
				tabpage:0,
				tabCurTab:0,
				tc_index:0,
				livearr:{
					endday:0,
					endhou:0,
					endmin:0,
					endsec:0,
					
					startday:0,
					starthou:0,
					startmin:0,
					startsec:0
				}
			}
		},
		onLoad(options) {
			this.getCategory()
			let data = this.$common.getCache('page-' + this.page_code)
			if (!data) {
				uni.startPullDownRefresh({})
			} else {
				this.detail = data
				uni.setStorageSync('theme_default', this.detail.style)
				this.theme = this.$config.THEME()

				if (this.$refs.navbar) this.$refs.navbar.updateset()
				if (this.$refs.PageIndex0) {
					this.$refs.PageIndex0[0].updateset()
				}
			}
			
			this.pg_times();
			
		},
		onShow() {
			if (this.detail) uni.setStorageSync('theme_default', this.detail.style)
			this.theme = this.$config.THEME()
			if (this.$refs.navbar) this.$refs.navbar.updateset()
			if (this.$refs.PageIndex0) {
				this.$refs.PageIndex0[0].updateset()
			}
			this.getIndex()
		},
		methods: {
			getLeveTablist(cate_id)
			{
				if (!this.payloading) {
					this.payloading = true
					let param = {
						page: this.tabpage,
						cate_id: cate_id
					}
					
					this.$http
						.get('product_taocan', param)
						.then((response) => {
							
							let tc_list = this.tc_list
							if (response.data.data.length > 0) {
								if (tc_list.length > 0)
									tc_list = tc_list.concat(response.data.data)
								else tc_list = response.data.data
							} 
							this.tc_list = tc_list
							this.tabpage ++
							this.payloading = false
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							uni.stopPullDownRefresh()
						})
				}
				
			},
			TabSelectLevel(index)
			{
				this.tabCurTab=index
				if(this.tabCurTab==1){
					this.tc_index=1
				}else{
					this.tc_index=0
				}
				this.payloading = false
				this.tabpage = 1
				this.tc_list = []
				this.getLeveTablist(this.cate_id)
			},
			getMore() {
				this.getList(this.cate_id)
				this.getLeveTablist(this.cate_id)
			},
			initProList(){
				this.hasMore = true
				this.loading = false
				this.page = 1
				this.pro_list = []
				this.getList(this.cate_id)
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
				this.cate_id = this.list[this.mainCur].id
				this.is_special=this.list[this.mainCur].is_special
				this.tc_index=0
				this.initProList()
			},
			getCategory() {
				this.$http
					.get('product_cate_index', {
						type: this.type
					})
					.then((response) => {
						this.list = response.data.data
						if(this.list[0]){
							this.cate_id = this.list[0].id
						}
						this.initProList()
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getList(cate_id) {
				if (this.hasMore && !this.loading) {
					this.loading = true
					let param = {
						page: this.page,
						cate_id: cate_id
					}
					
					this.$http
						.get('product_index_view', param)
						.then((response) => {
							console.log(response.data.data)
							
							let list = this.pro_list
							if (response.data.data.length > 0) {
								if (list.length > 0)
									list = list.concat(response.data.data)
								else list = response.data.data
							} else {
								this.hasMore = false
							}
							
							this.pro_list = list
							this.page ++
							this.loading = false
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							// console.log(response)
							uni.stopPullDownRefresh()
						})
				}
			},
			
			onLocation(){
				uni.startPullDownRefresh({})
			},
			pg_times(){
				this.$http
					.get('pg_times', {})
					.then((response) => {
						// console.log(response)
						
						if (response.data.data != null) {
							if (response.data.data.start_time != 0) {
								this.getLiveTimeCount(response.data.data.start_time);
							}
							if (response.data.data.end_time != 0) {
								this.getLiveTimeEnd(response.data.data.end_time);
							}
						}
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						// console.log(response)
					})
			},
			getLiveTimeEnd(startTime){
				
				if(startTime){  //如果设置了开始时间
					this.liveEndTimes=setInterval(()=>{
			                        //注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
						let transedPreTime=startTime.replace(/-/g,'/') //这里转化时间格式为以/分隔形式
						let nowTime = new Date().getTime();
						let preTime = new Date(transedPreTime).getTime()
						let obj = null;
						
						if(preTime - nowTime > 0){
							let time = (preTime - nowTime) / 1000;
							let day = parseInt(time / (60 * 60 * 24));
							let hou = parseInt(time % (60 * 60 * 24) / 3600);
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							obj = {
								day: day<10?'0'+day:day,
								hou: hou<10?'0'+hou:hou,
								min: min<10?'0'+min:min,
								sec: sec<10?'0'+sec:sec
							};
							this.liveend=+obj.day+ + '天' +obj.hou+ '时' + obj.min + '分' + obj.sec + '秒'
							this.livearr.endday = obj.day
							this.livearr.endhou = obj.hou
							this.livearr.endmin = obj.min
							this.livearr.endsec = obj.sec
						} else {
							obj = {day:'00',hou:'00',min:'00',sec:'00'};
							// this.liveend=obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
							this.liveend = null
							clearInterval(this.liveEndTimes)
						}  
					},1000)
				}else{
					this.liveend=null
				}
			},
			getLiveTimeCount(startTime){
				
				if(startTime){  //如果设置了开始时间
					this.liveCountTimes=setInterval(()=>{
			                        //注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
						let transedPreTime=startTime.replace(/-/g,'/') //这里转化时间格式为以/分隔形式
						let nowTime = new Date().getTime();
						let preTime = new Date(transedPreTime).getTime()
						let obj = null;
						
						if(preTime - nowTime > 0){
							let time = (preTime - nowTime) / 1000;
							let day = parseInt(time / (60 * 60 * 24));
							let hou = parseInt(time % (60 * 60 * 24) / 3600);
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							obj = {
								day: day<10?'0'+day:day,
								hou: hou<10?'0'+hou:hou,
								min: min<10?'0'+min:min,
								sec: sec<10?'0'+sec:sec
							};
							this.livestart=obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
							this.livearr.startday = obj.day
							this.livearr.starthou = obj.hou
							this.livearr.startmin = obj.min
							this.livearr.startsec = obj.sec
							// console.log(this.livestart)
						} else {
							obj = {day:'00',hou:'00',min:'00',sec:'00'};
							// this.livestart=obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
							this.livestart = null
							clearInterval(this.liveCountTimes)
						}  
					},1000)
				}else{
					this.livestart=null
				}
			},
			getIndex() {
				this.$http
					.get('pages', {
						code: this.page_code
					})
					.then((response) => {
						this.detail = response.data.data
						this.$common.setCache('page-' + this.page_code, this.detail, 10 * 60)
						uni.setStorageSync('theme_default', this.detail.style)
						this.theme = this.$config.THEME()

						if (this.$refs.navbar) this.$refs.navbar.updateset()
						if (this.$refs.PageIndex0) {
							this.$refs.PageIndex0[0].updateset()
						}
						uni.stopPullDownRefresh()
						uni.hideLoading()
					})
					.catch((response) => {
						uni.hideLoading()
					})
			},
		},
		onPullDownRefresh() {
			this.getIndex()
			// this.initProList()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/index'
			if (this.member) path += "?share_id=" + this.member.id
			return {
				title: this.$config.APP_NAME + '-商城',
				imageUrl: '',
				path: path
			}
		},
		
	}
</script>

<style>
	.cu-item .curT
	{
		width:160rpx;
		color: #F8F9FB;
		border-radius:15rpx;
		background-color: crimson;
		padding: 10rpx;
		margin-left: 70rpx;
	}
	.cu-item .curX
	{
		width:160rpx;
		border-radius:15rpx;
		padding: 10rpx;
		margin-left: 70rpx;
	}
	.goods-bottom{
		width: 260rpx;
		/* height: px; */
		line-height: 22px;
		overflow: hidden;
	}
	.VerticalNav.nav {
		width: 160upx;
		white-space: initial;
	}
	.cu-list>.cu-item {
		transition: all .6s ease-in-out 0s;
		/* -webkit-transform:inherit; */
	}
	.cu-list.grid>.cu-item{
		position: initial;
		padding: 0 0 18upx;
	}
	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #f1f1f1;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}
	
	.VerticalNav.nav .cu-item.cur {}
	
	.VerticalNav.nav .cu-item.cur .after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 0 10upx 10upx 0;
		position: absolute;
		/* background-color: #3D7EFF; */
		top: 0;
		left: 0upx;
		bottom: 0;
		font-size: 30upx;
		margin: auto;
	}
	
	.nav .cu-item.cur::after {
		display: none;
	}
	.VerticalBox {
		margin-top: 20rpx;
		height: 80vh;
		display: flex;
	}
	
	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
		position: initial !important;
		
	}
	
	.leftitem {
		height: auto !important;
		line-height: 40rpx;
		padding: 20rpx 15rpx;
	}
	
	.main-list {
		min-height: 100vh;
	}
	
	.product-name{
		line-height: 22px;
		height: 44px;
		width: 260rpx;
		/* width: 350rpx;
		overflow: hidden;    
		text-overflow:ellipsis;    
		white-space: nowrap; */
		text-align: justify;
		overflow: hidden;
	}
	.product-title{
		line-height: 22px;
		height: 44px;
		width: 260rpx;
		margin-top: 40rpx;
		text-align: center;
		overflow: hidden;
	}
	.page_footer {
		position: fixed;
		/* width: 100%; */
		/* left: 0; */
		right: 0;
		bottom: 15%;
		z-index: 9999999;
	}
	.page {
		background-color: #F8F9FB;
	}

	.card-swiper uni-swiper-item,
	.card-swiper swiper-item {
		padding: 0 !important;
	}

	.category-view {
		padding: 10px 0 0 0;
	}

	.m-title {
		font-size: 18px !important;
	}

	.to-top {
		position: fixed;
		right: 20upx;
		bottom: 120upx;
		z-index: 10;
	}

	.to-top .ctr {
		width: 70upx;
		height: 70upx;
	}

	.to-top .ctr image {
		width: 100%;
		height: 100%;
	}

	.search-form {
		border-radius: 30rpx;
	}

	.goods-view {
		padding: 0 10px;
	}

	.goods-item {}

	.article-view {
		display: flex;
		justify-content: space-between;
		padding: 15px;
	}

	.article-list {
		width: 100%;
		margin-left: 15px;
		margin-right: 15px;
		overflow: hidden;
	}

	.article-view .article-list .li {
		width: 100%;
		height: 24px;
		line-height: 24px;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 10px;
		font-size: 16px;
	}

	.article-view .article-list .cuIcon-title:before {
		margin-right: 10px
	}

	.article-view .cu-avatar {
		width: 48px;
		height: 48px;
		min-width: 48px;
	}
	.xl2{
		width: 260rpx;
		height: 260rpx;
		min-width: 260rpx;
	}
	.space-between {
	    display: flex;
	    justify-content: space-between;
	}
	
</style>

<style>
	.liveplay-box{
		margin: 20rpx 25rpx 0;
		padding: 22rpx 24rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	.liveplay-box .topic-line{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.topic-line image{
		width: 137rpx;
		height: 32rpx;
	}
	.topic-line .more{
		font-size: 30rpx;
		color: #666666;
	}
	.liveplay-box .zone-time{
		margin-top: 25rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.zone-time .item{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.zone-time .item .time{
		font-size: 30rpx;
		color: #999999;
	}
	.zone-time .item .zone{
		margin-left: 20rpx;
		width: 100rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background-color: #FFE24D;
		font-size: 22rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: center;
	}
	.liveplay-box .deadline-box{
		margin-top: 15rpx;
		text-align: center;
		font-size: 22rpx;
		color: #999999;
		white-space: nowrap;
	}
	.liveplay-box .deadline-box text{
		margin: 0 2rpx;
		font-size: 16rpx;
		width: 27rpx;
		height: 27rpx;
		text-align: center;
		line-height: 27rpx;
		color: #FFFFFF;
		background-color: #CC0000;
	}
	.liveplay-box .liveplayer-list{
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
	}
	.liveplayer-list .liveplayer{
		width: 256rpx;
		padding: 18rpx;
		border-top: 2rpx #999999 solid;
		border-right: 2rpx #999999 solid;
	}
	.liveplayer-list .liveplayer:last-child{
		border-right: none;
	}
	.liveplayer .cover-box{
		width: 220rpx;
		height: 220rpx;
		position: relative;
	}
	.cover-box .cover{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.cover-box .status{
		position: absolute;
		top: 10rpx;
		left: 14rpx;
		width: 140rpx;
		height: 38rpx;
		background-color: #FFFFFF;
		border-radius: 19rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.cover-box .status image{
		width: 20rpx;
		height: 20rpx;
	}
	.cover-box .status text{
		font-size: 24rpx;
		color: #CC0000;
	}
	.liveplayer .title{
		width: 100%;
		text-align: center;
		font-size: 22rpx;
		color: #CCCCCC;
		line-height: 45rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.liveplayer .attr{
		display: flex;
		justify-content: space-around;
		align-items: center;
		overflow: hidden;
	}
	.liveplayer .attr text{
		padding: 3rpx 8rpx;
		border-radius: 5rpx;
		font-size: 16rpx;
		white-space: nowrap;
	}
	.liveplayer .attr .red-bg{
		background-color: #CC0000;
		color: #FFFFFF;
		border: 1rpx #CC0000 solid;
	}
	.liveplayer .attr .red-round{
		background-color: #FFFFFF;
		color: #CC0000;
		border: 1rpx #CC0000 solid;
	}
	.liveplayer .live-btn{
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.liveplayer .live-btn view{
		border-radius: 10rpx;
		padding: 4rpx 18rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		background-color: #CC0000;
	}
</style>
<style>
	.title-box{
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title-box .long-square{
		width: 53rpx;
		height: 6rpx;
		border-radius: 2rpx;
		background-color: #999999;
	}
	.title-box .short-square{
		width: 8rpx;
		height: 8rpx;
		border-radius: 2rpx;
		background-color: #666666;
	}
	.title-box .short-square.left{
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	.title-box .short-square.right{
		margin-left: 20rpx;
		margin-right: 10rpx;
	}
	.title-box .title{
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
	}
</style>
<style>
	.zone-box{
		padding: 0 25rpx;
	}
	.zone-box .goods-item{
		background-color: #FFFFFF;
		padding: 8rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
	}
	.goods-item .thumb-box{
		margin-right: 45rpx;
		flex-shrink: 0;
		width: 204rpx;
		height: 204rpx;
		position: relative;
	}
	.thumb-box image{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.thumb-box view{
		position: absolute;
		top: 0;
		left: 0;
		width: 104rpx;
		height: 36rpx;
		background-color: #F9263E;
		border-top-right-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		text-align: center;
		font-size: 14rpx;
		color: #FFFFFF;
	}
	.goods-item .info{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.info .title{
		width: 420rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #666666;
		overflow: hidden;    
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.info .desc-box{
		margin-top: 20rpx;
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.desc-box .desc-price{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.desc-price .description{
		font-size: 20rpx;
		color: #999999;
		display: -webkit-box;    
		-webkit-box-orient: vertical;    
		-webkit-line-clamp: 3;    
		overflow: hidden;
	}
	.desc-price .price{
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #F9263E;
	}
	.info .pin-btn{
		flex-shrink: 0;
		width: 75rpx;
		height: 75rpx;
		margin-left: 10rpx;
	}
</style>